<template>
  <div style="z-index: 1; height: 500px; padding-top: 5px">
    <el-empty v-if="emptyVisible" :description="$t('common.empty_tip')" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
import { appstoreApplicationDailyDownloadTrend } from '@/api/statistic'

import { getOperatorApplicationTrend } from '@/api/operator'

export default {
  name: 'AppDownloadChart',
  mixins: [resize],
  data() {
    return {
      series: [],
      chart: null,
      emptyVisible: false,
      legend: [],
      appStoreData: {},
      twoData: {
        appStore: [],
        toms: []
      }
    }
  },
  created() {
    this.initData({
      dateUnit: 'Month',
      dateRange: '6'
    })
  },
  methods: {
    initData(dataFilter) {
      var params = {
        dateUnit: dataFilter.dateUnit,
        dateRange: dataFilter.dateRange,
        operatorId: this.$route.params.operatorId
      }
      appstoreApplicationDailyDownloadTrend(params)
        .then((res) => {
          this.twoData.appStore = res.yaxisData
          getOperatorApplicationTrend(params)
            .then((data) => {
              this.twoData.toms = data.yaxisData
              this.$nextTick(() => {
                this.initChart(data)
              })
            })
            .catch((e) => {
              this.$confirmError(e)
              this.emptyVisible = true
            })
        })
        .catch((e) => {
          this.$confirmError(e)
          this.emptyVisible = true
        })
    },
    initChart(data) {
      this.chart = echarts.init(this.$el)
      this.option = {
        // title: {
        //   text: this.$t('dashboard.top_10_merchants_and_active_merchants'),
        //   subtext: '纯属虚构'
        // },

        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['TOMS', 'AppStore']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: data.xaxisData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            // name: this.$t('data_center.appstore_new_app_version_count'),
            name: 'TOMS',
            type: 'line',
            data: this.twoData.toms
          },
          {
            // name: this.$t('data_center.appstore_new_app_version_count'),
            name: 'AppStore',
            type: 'line',
            data: this.twoData.appStore
          }
        ]
      }
      this.chart.setOption(this.option, true)
    }
  }
}
</script>

<style>
</style>
